<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0411-01 颜色渐变</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{
            width: 1000px;
            height: 100px;
            margin:10px auto;
            border: 1px solid #000;
        }
        .box1{
            background: linear-gradient(45deg,red 0%,yellow 25%,blue 50%,yellow 75%,red);
        }
        .box2{
            background-image: linear-gradient(45deg,red 25%,yellow 25%,yellow 50%,red 50%,red 75%,yellow 75%);/*既然是个背景图,就改变背景图的大小,然后平铺*/
            background-size:50px 50px;
        }
        .box3{
            height: 200px;
            width: 200px;
            border-radius:50%;
            background: radial-gradient(at 50px 50px,rgba(255,255,255,.5),rgba(0,0,0,.7)) blue;
            border:0;
            text-shadow:-1px -1px 1px #fff;
            line-height:200px;
            text-align: center;
            font-size:50px;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3">渐变</div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
<div class="box10"></div>
</body>
</html>